<template>
  <div class="login">
    <div class="login_form">
      <div class="login_con">
        <span style="font-size:24px;margin: 10px 0px">欢迎登录</span>
        <el-form ref="form" :model="loginForm" style="width:80%;">
          <!-- 输入用户名/邮箱 -->
          <el-form-item>
            <el-input
              placeholder="请输入用户名/邮箱"
              v-model="loginForm.account">
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <!-- 输入密码 -->
          <el-form-item>
            <el-input
              placeholder="请输入用户名/邮箱"
              v-model="loginForm.password"
              show-password>
              <i slot="prefix" class="el-input__icon el-icon-edit"></i>
            </el-input>
          </el-form-item>

          <!-- 验证码 -->
          <el-form ref="form" :model="loginForm" :inline="true">
            <el-form-item >
              <el-input
                placeholder="请输入验证码"
                v-model="code">
              </el-input>
            </el-form-item>
            <el-form-item>
              <vue-captcha ref="captcha" :captcha.sync="vertify" @on-change="handleChange"></vue-captcha>
            </el-form-item>
          </el-form>
          
          <!-- 选择用户身份 -->
          <el-form-item style="text-align: center">
            <el-radio-group v-model="loginForm.usertype">
              <el-radio label="0">一般用户</el-radio>
              <el-radio label="1">专家</el-radio>
              <el-radio label="2">管理员</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 登录/注册按钮 -->
          <el-form-item style="text-align: center"> 
            <el-button style="width:45%;" type="primary" @click="login">登录</el-button>
            <el-button style="width:45%;"  @click="toRegister">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
        <Footer />
  </div>
</template>

<script>
import Footer from '../components/footer.vue'
import VueCaptcha from "vue-captcha-code";
export default {
  data() {
    return {
      vertify: "",
      code: '',
      loginForm: {
        account: '',
        password: '',
        usertype: '0',
      }
    }
  },
  components:{
    VueCaptcha, Footer
  },
  mounted() {
    let userInfo = JSON.parse(localStorage.getItem('userInfo'))
    if (null === userInfo) return;
    if (userInfo.isLogin) {
      this.ToHomePage(userInfo)
    }
  },
  methods: {
    // 打印验证码
    handleChange(code) {
      console.log('code: ', code);
    },
    // 跳转注册界面
    toRegister(){
      this.$router.push("/register")
    },
    // 登录
    login() {
      if (this.code.toLowerCase() == this.vertify.toLowerCase()) {
       this.$axios.get('http://127.0.0.1:8000/api/login?body=' + JSON.stringify(this.loginForm))
        .then((res) => {
          console.log(res);
          if (res.data.msg == "success") {
            // 账号信息存入本地 用于自动登录
            let userInfo = {
              isLogin: true,
              username: res.data.body.account,
              usertype: res.data.body.usertype,
            }
            localStorage.setItem('userInfo', JSON.stringify(userInfo));
            this.ToHomePage(userInfo)
          }else if(res.data.msg == "用户名或密码错误!"){
            this.$message.error('用户名或密码错误!');
          }else if(res.data.msg == "用户身份信息出错!"){
            this.$message.error('用户身份信息出错!');
          }
        })  
      }else{
        this.$message.error('验证码输入错误');
      }
    },
    ToHomePage(loginInf){
      if (loginInf.usertype == 0) {
        this.$router.push("/home")

      }else if(loginInf.usertype == 1){

      }else if(loginInf.usertype == 2){
        this.$router.push("/admin/home")
      }
    }
  }
}
</script>

<style >
.login{
  background: url('../assets/login_bg_24.jpg') center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  color: #666666;
  font-family: "宋体";
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.login_form{
  background: rgb(255, 255, 255, 0.85);
  width: 30%;
  height: 55%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .36), 0 0 12px rgba(0, 0, 0, .12);
  margin-top: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login_con{
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>